<!DOCTYPE html>
<html>
	<head>
		<title>顺和国际智慧物流园疫情防控云数据</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href="css/yqfk1.css">
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<script src="js/china.js"></script>
		<!-- 		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script> -->
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="jquery/jquery-3.1.1.min.js"></script>
		<script src="js/vue-resource.js"></script>
		<script src="js/commom.js"></script>
		<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=Ps1AMzreya9bsECpN81hwxTbZ3t0GCeS">
		    //v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
		</script> -->
		<script src="js/vue.js"></script>
		<script src="js/asidenav.js"></script>
		<script src="js/scroll.js"></script>
		<script src="js/vue-seamless-scroll.min.js"></script>

	</head>
	<body>

		<!-- 页面架构 -->
		<div id="page">
			<!-- 头部标题区 -->
			<div id="header_div">
				<div id="title">顺和国际智慧物流园疫情防控云数据</div>
				<div id="time">2022年5月3日 11:55:28</div>
			</div>

			<!-- 内容区域 -->
			<div id="main_div">

				<!-- 中高风险地区数据 -->
				<div id="area_data_div">
					<div class="sub_title">中高风险地区数据</div>

					<!-- 选择搜索日期 -->
					<div id="select_date">
						选择日期:
						<div id="s_date">开始日期</div>
						至
						<div id="e_date">结束日期</div>
						<div id="btn_search_1">搜索</div>
					</div>

					<!-- 入园 出园 车辆 -->
					<div id="in_out_num">
						入园车辆数：
						<div id="in_num">898</div>
						出园车辆数：
						<div id="out_num">562</div>
					</div>

					<div id="in_truck_num_0">全国各地来车按中高风险地区排列统计</div>

					<!-- 来车统计表 -->
					<div id="chart1"></div>

				</div>

				<!-- 地图 -->
				<div id="map_div">
					<div id="map"></div>
				</div>

				<!-- 车辆出入园区记录 -->
				<div id="in_out_reco_div">

					<!-- 入园记录 -->
					<div id="in_reco">

						<div class="sub_title">车辆入园记录</div>

						<div id="in_reco_head_div">
							<div>车牌号</div>
							<div>手机号码</div>
							<div>始发地及途径地</div>
							<div>入园时间</div>
						</div>

						<hr id="#hr1">

						<vue-seamless-scroll :data="in_reco_list" :class-option="classOption" class="vue_scroll">
							<div id="in_reco_list" v-for="(item,index) in in_reco_list">
								<div class="item_reco">{{item.car}}</div>
								<div class="item_reco">{{item.mobile}}</div>
								<div class="item_reco">{{item.activity_place}}</div>
								<div class="item_reco">{{item.tbtime}}</div>
							</div>
						</vue-seamless-scroll>

					</div>

					<!-- 出园记录 -->
					<div id="out_reco">
						<div class="sub_title">车辆出园记录</div>

						<div id="out_reco_head_div">
							<div>车牌号</div>
							<div>手机号码</div>
							<div>始发地及途径地</div>
							<div>入园时间</div>
						</div>

						<hr id="#hr2">

						<vue-seamless-scroll :data="in_reco_list" :class-option="classOption" class="vue_scroll">
							<div id="out_reco_list" v-for="(item,index) in in_reco_list">
								<div class="item_reco">{{item.car}}</div>
								<div class="item_reco">{{item.mobile}}</div>
								<div class="item_reco">{{item.activity_place}}</div>
								<div class="item_reco">{{item.tbtime}}</div>
							</div>
						</vue-seamless-scroll>

					</div>
				</div>

			</div>

			<!-- 底部区域 -->
			<div id="footer_div">
				<div>山东顺和国际智慧物流园</div>
				<div>联系方式：400-681-5656</div>
				<div>地址：山东省临沂市兰山区大山路与工业一路交汇处东南</div>
			</div>

		</div>

		<script type="text/javascript">
			var token; // 用户token
			var vm = new Vue({
				el: '#page',
				data: {
					classOption: {
						step: 1, // 数值越大速度滚动越快
						limitMoveNum: this.in_reco_list.length, // 开始无缝滚动的数据量 this.dataList.length
						hoverStop: true, // 是否开启鼠标悬停stop
						direction: 1, // 0向下 1向上 2向左 3向右
						openWatch: true, // 开启数据实时监控刷新dom
						singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
						singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
						waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
						autoPlay: true
					},

					in_reco_list: [{
							car: '鲁Q311B0',
							mobile: '13590087652',
							activity_place: '临沂济宁日照',
							tbtime: '2022-05-03 17:37'
						},
						{
							car: '鲁Q311B0',
							mobile: '13590087652',
							activity_place: '临沂济宁日照',
							tbtime: '2022-05-03 17:37'
						},
						{
							car: '鲁Q311B0',
							mobile: '13590087652',
							activity_place: '临沂济宁日照',
							tbtime: '2022-05-03 17:37'
						},
						{
							car: '鲁Q311B0',
							mobile: '13590087652',
							activity_place: '临沂济宁日照',
							tbtime: '2022-05-03 17:37'
						},
						{
							car: '鲁Q311B0',
							mobile: '13590087652',
							activity_place: '临沂济宁日照',
							tbtime: '2022-05-03 17:37'
						},
						{
							car: '鲁Q311B0',
							mobile: '13590087652',
							activity_place: '临沂济宁日照',
							tbtime: '2022-05-03 17:37'
						},
						{
							car: '鲁Q311B0',
							mobile: '13590087652',
							activity_place: '临沂济宁日照',
							tbtime: '2022-05-03 17:37'
						},
						{
							car: '鲁Q311B0',
							mobile: '13590087652',
							activity_place: '临沂济宁日照',
							tbtime: '2022-05-03 17:37'
						},
						{
							car: '鲁Q311B0',
							mobile: '13590087652',
							activity_place: '临沂济宁日照',
							tbtime: '2022-05-03 17:37'
						},
						{
							car: '鲁Q311B0',
							mobile: '13590087652',
							activity_place: '临沂济宁日照',
							tbtime: '2022-05-03 17:37'
						},
						{
							car: '鲁Q311B0',
							mobile: '13590087652',
							activity_place: '临沂济宁日照',
							tbtime: '2022-05-03 17:37'
						},
						{
							car: '鲁Q311B0',
							mobile: '13590087652',
							activity_place: '临沂济宁日照',
							tbtime: '2022-05-03 17:37'
						},
						{
							car: '鲁Q311B0',
							mobile: '13590087652',
							activity_place: '临沂济宁日照',
							tbtime: '2022-05-03 17:37'
						},
						{
							car: '鲁Q311B0',
							mobile: '13590087652',
							activity_place: '临沂济宁日照',
							tbtime: '2022-05-03 17:37'
						},
						{
							car: '鲁Q311B0',
							mobile: '13590087652',
							activity_place: '临沂济宁日照',
							tbtime: '2022-05-03 17:37'
						}

					],
				},

				created: function() {
					// 创建后 `this` 指向 vm 实例
					this.getInRecoList();
				},

				methods: {
					// 点击合作机构logo
					onLogoClick(item) {
						// var url = 'org_id=' + item.id;
						// window.open('../home/pipei.html?' + url, '_blank').location;
					},

					// 请求合作机构
					getInRecoList() {
						token = localStorage["token"];
						console.log("疫情防控首页面。。。token = " + token);
						$.ajax({
							url: BASE_URL + 'api/epidemic/listru?page=1&type=1',
							type: 'GET',
							data: {
								page: 1,
								type: 1,
							},
							dataType: 'json',
							success: function(data) {
								// mui.hideLoading();
								console.log('getInRecoList...请求成功。。。。。。');
								// var jsonRes = JSON.parse(data);
								var jsonRes = data;
								console.log(jsonRes);
								// vm.in_reco_list = jsonRes.data.list;
							},
							error: function(e) {
								// mui.hideLoading();
								console.log(e);
							},
						});
					},

				},
			});
		</script>

		<script type="text/javascript">
			var dom = document.getElementById('chart1');
			var myChart = echarts.init(dom, null, {
				renderer: 'canvas',
				useDirtyRect: false
			});
			var app = {};

			var option;

			option = {
				dataset: {
					title: {
						text: '车辆统计'
					},
					source: [
						['score', 'amount', 'product'],
						[632, 20112, '湖北'],
						[551, 101852, '北京'],
						[1069, 91852, '河南'],
						[1076, 79146, '浙江'],
						[788, 20145, '上海'],
						[992, 12755, '安徽'],
						[1110, 41032, '河北'],
						[1202, 78254, '江苏'],
						[1501, 58212, '山东'],
					]
				},
				grid: {
					containLabel: true
				},
				xAxis: {
					// name: '车辆数',
					axisLabel: {
						show: true, // 是否显示刻度标签
						color: '#FFF', // 刻度标签文字的颜色
						fontSize: '12px', // 文字字体大小
					},
					axisLine: {
						show: true, // 是否显示坐标轴轴线
					},

					splitLine: {
						show: false, // 是否显示分隔线。默认数值轴显示，类目轴不显示
						interval: '0', // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
						color: ['#000000'], // 分隔线颜色，可以设置成单个颜色，也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色
						width: 1, // 分隔线线宽
						type: 'solid', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
					},

				},
				yAxis: {
					// name: '地区',
					type: 'category',
					axisLabel: {
						show: true, // 是否显示刻度标签
						color: '#FFF', // 刻度标签文字的颜色
						fontSize: '12px', // 文字字体大小
					},
				},

				series: [{
					type: 'bar',
					encode: {
						// Map "指定的列名" column to x y axis.
						x: 'score',
						y: 'product'
					}
				}]
			};

			if (option && typeof option === 'object') {
				myChart.setOption(option);
			}

			window.addEventListener('resize', myChart.resize);
		</script>

		<script type="text/javascript">
			var dom = document.getElementById("map");
			var myChart = echarts.init(dom);
			var data = {
				'临沂': [116.4551, 40.2539],
				'上海': [121.4648, 31.2891],
				'东莞': [113.8953, 22.901],
				'东营': [118.7073, 37.5513],
				'中山': [113.4229, 22.478],
				'临汾': [111.4783, 36.1615],
				'丹东': [124.541, 40.4242],
				'丽水': [119.5642, 28.1854],
				'乌鲁木齐': [87.9236, 43.5883],
				'佛山': [112.8955, 23.1097],
				'保定': [115.0488, 39.0948],
				'兰州': [103.5901, 36.3043],
				'包头': [110.3467, 41.4899],
				'北海': [109.314, 21.6211],
				'南京': [118.8062, 31.9208],
				'南宁': [108.479, 23.1152],
				'南昌': [116.0046, 28.6633],
				'南通': [121.1023, 32.1625],
				'厦门': [118.1689, 24.6478],
				'台州': [121.1353, 28.6688],
				'合肥': [117.29, 32.0581],
				'呼和浩特': [111.4124, 40.4901],
				'咸阳': [108.4131, 34.8706],
				'哈尔滨': [127.9688, 45.368],
				'唐山': [118.4766, 39.6826],
				'嘉兴': [120.9155, 30.6354],
				'大同': [113.7854, 39.8035],
				'大连': [122.2229, 39.4409],
				'天津': [117.4219, 39.4189],
				'太原': [112.3352, 37.9413],
				'威海': [121.9482, 37.1393],
				'宁波': [121.5967, 29.6466],
				'宝鸡': [107.1826, 34.3433],
				'宿迁': [118.5535, 33.7775],
				'常州': [119.4543, 31.5582],
				'广州': [113.5107, 23.2196],
				'廊坊': [116.521, 39.0509],
				'延安': [109.1052, 36.4252],
				'张家口': [115.1477, 40.8527],
				'徐州': [117.5208, 34.3268],
				'德州': [116.6858, 37.2107],
				'惠州': [114.6204, 23.1647],
				'成都': [103.9526, 30.7617],
				'扬州': [119.4653, 32.8162],
				'承德': [117.5757, 41.4075],
				'拉萨': [91.1865, 30.1465],
				'无锡': [120.3442, 31.5527],
				'日照': [119.2786, 35.5023],
				'昆明': [102.9199, 25.4663],
				'杭州': [119.5313, 29.8773],
				'枣庄': [117.323, 34.8926],
				'柳州': [109.3799, 24.9774],
				'株洲': [113.5327, 27.0319],
				'武汉': [114.3896, 30.6628],
				'汕头': [117.1692, 23.3405],
				'江门': [112.6318, 22.1484],
				'沈阳': [123.1238, 42.1216],
				'沧州': [116.8286, 38.2104],
				'河源': [114.917, 23.9722],
				'泉州': [118.3228, 25.1147],
				'泰安': [117.0264, 36.0516],
				'泰州': [120.0586, 32.5525],
				'济南': [117.1582, 36.8701],
				'济宁': [116.8286, 35.3375],
				'海口': [110.3893, 19.8516],
				'淄博': [118.0371, 36.6064],
				'淮安': [118.927, 33.4039],
				'深圳': [114.5435, 22.5439],
				'清远': [112.9175, 24.3292],
				'温州': [120.498, 27.8119],
				'渭南': [109.7864, 35.0299],
				'湖州': [119.8608, 30.7782],
				'湘潭': [112.5439, 27.7075],
				'滨州': [117.8174, 37.4963],
				'潍坊': [119.0918, 36.524],
				'烟台': [120.7397, 37.5128],
				'玉溪': [101.9312, 23.8898],
				'珠海': [113.7305, 22.1155],
				'盐城': [120.2234, 33.5577],
				'盘锦': [121.9482, 41.0449],
				'石家庄': [114.4995, 38.1006],
				'福州': [119.4543, 25.9222],
				'秦皇岛': [119.2126, 40.0232],
				'绍兴': [120.564, 29.7565],
				'聊城': [115.9167, 36.4032],
				'肇庆': [112.1265, 23.5822],
				'舟山': [122.2559, 30.2234],
				'苏州': [120.6519, 31.3989],
				'莱芜': [117.6526, 36.2714],
				'菏泽': [115.6201, 35.2057],
				'营口': [122.4316, 40.4297],
				'葫芦岛': [120.1575, 40.578],
				'衡水': [115.8838, 37.7161],
				'衢州': [118.6853, 28.8666],
				'西宁': [101.4038, 36.8207],
				'西安': [109.1162, 34.2004],
				'贵阳': [106.6992, 26.7682],
				'连云港': [119.1248, 34.552],
				'邢台': [114.8071, 37.2821],
				'邯郸': [114.4775, 36.535],
				'郑州': [113.4668, 34.6234],
				'鄂尔多斯': [108.9734, 39.2487],
				'重庆': [107.7539, 30.1904],
				'金华': [120.0037, 29.1028],
				'铜川': [109.0393, 35.1947],
				'银川': [106.3586, 38.1775],
				'镇江': [119.4763, 31.9702],
				'长春': [125.8154, 44.2584],
				'长沙': [113.0823, 28.2568],
				'长治': [112.8625, 36.4746],
				'阳泉': [113.4778, 38.0951],
				'青岛': [120.4651, 36.3373],
				'韶关': [113.7964, 24.7028],
				'北京': [116.509448, 39.849036],
				'新疆': [87.651297, 43.846898]
			};

			var geoCoordMap = {
				'临沂': [118.3118, 35.2936],
				'临汾': [111.4783, 36.1615],
				'上海': [121.4648, 31.2891],
				'东莞': [113.8953, 22.901],
				'东营': [118.7073, 37.5513],
				'中山': [113.4229, 22.478],
				'丹东': [124.541, 40.4242],
				'丽水': [119.5642, 28.1854],
				'乌鲁木齐': [87.9236, 43.5883],
				'佛山': [112.8955, 23.1097],
				'保定': [115.0488, 39.0948],
				'兰州': [103.5901, 36.3043],
				'包头': [110.3467, 41.4899],
				'北海': [109.314, 21.6211],
				'南京': [118.8062, 31.9208],
				'南宁': [108.479, 23.1152],
				'南昌': [116.0046, 28.6633],
				'南通': [121.1023, 32.1625],
				'厦门': [118.1689, 24.6478],
				'台州': [121.1353, 28.6688],
				'合肥': [117.29, 32.0581],
				'呼和浩特': [111.4124, 40.4901],
				'咸阳': [108.4131, 34.8706],
				'哈尔滨': [127.9688, 45.368],
				'唐山': [118.4766, 39.6826],
				'嘉兴': [120.9155, 30.6354],
				'大同': [113.7854, 39.8035],
				'大连': [122.2229, 39.4409],
				'天津': [117.4219, 39.4189],
				'太原': [112.3352, 37.9413],
				'威海': [121.9482, 37.1393],
				'宁波': [121.5967, 29.6466],
				'宝鸡': [107.1826, 34.3433],
				'宿迁': [118.5535, 33.7775],
				'常州': [119.4543, 31.5582],
				'广州': [113.5107, 23.2196],
				'廊坊': [116.521, 39.0509],
				'延安': [109.1052, 36.4252],
				'张家口': [115.1477, 40.8527],
				'徐州': [117.5208, 34.3268],
				'德州': [116.6858, 37.2107],
				'惠州': [114.6204, 23.1647],
				'成都': [103.9526, 30.7617],
				'扬州': [119.4653, 32.8162],
				'承德': [117.5757, 41.4075],
				'拉萨': [91.1865, 30.1465],
				'无锡': [120.3442, 31.5527],
				'日照': [119.2786, 35.5023],
				'昆明': [102.9199, 25.4663],
				'杭州': [119.5313, 29.8773],
				'枣庄': [117.323, 34.8926],
				'柳州': [109.3799, 24.9774],
				'株洲': [113.5327, 27.0319],
				'武汉': [114.3896, 30.6628],
				'汕头': [117.1692, 23.3405],
				'江门': [112.6318, 22.1484],
				'沈阳': [123.1238, 42.1216],
				'沧州': [116.8286, 38.2104],
				'河源': [114.917, 23.9722],
				'泉州': [118.3228, 25.1147],
				'泰安': [117.0264, 36.0516],
				'泰州': [120.0586, 32.5525],
				'济南': [117.1582, 36.8701],
				'济宁': [116.8286, 35.3375],
				'海口': [110.3893, 19.8516],
				'淄博': [118.0371, 36.6064],
				'淮安': [118.927, 33.4039],
				'深圳': [114.5435, 22.5439],
				'清远': [112.9175, 24.3292],
				'温州': [120.498, 27.8119],
				'渭南': [109.7864, 35.0299],
				'湖州': [119.8608, 30.7782],
				'湘潭': [112.5439, 27.7075],
				'滨州': [117.8174, 37.4963],
				'潍坊': [119.0918, 36.524],
				'烟台': [120.7397, 37.5128],
				'玉溪': [101.9312, 23.8898],
				'珠海': [113.7305, 22.1155],
				'盐城': [120.2234, 33.5577],
				'盘锦': [121.9482, 41.0449],
				'石家庄': [114.4995, 38.1006],
				'福州': [119.4543, 25.9222],
				'秦皇岛': [119.2126, 40.0232],
				'绍兴': [120.564, 29.7565],
				'聊城': [115.9167, 36.4032],
				'肇庆': [112.1265, 23.5822],
				'舟山': [122.2559, 30.2234],
				'苏州': [120.6519, 31.3989],
				'莱芜': [117.6526, 36.2714],
				'菏泽': [115.6201, 35.2057],
				'营口': [122.4316, 40.4297],
				'葫芦岛': [120.1575, 40.578],
				'衡水': [115.8838, 37.7161],
				'衢州': [118.6853, 28.8666],
				'西宁': [101.4038, 36.8207],
				'西安': [109.1162, 34.2004],
				'贵阳': [106.6992, 26.7682],
				'连云港': [119.1248, 34.552],
				'邢台': [114.8071, 37.2821],
				'邯郸': [114.4775, 36.535],
				'郑州': [113.4668, 34.6234],
				'鄂尔多斯': [108.9734, 39.2487],
				'重庆': [107.7539, 30.1904],
				'金华': [120.0037, 29.1028],
				'铜川': [109.0393, 35.1947],
				'银川': [106.3586, 38.1775],
				'镇江': [119.4763, 31.9702],
				'长春': [125.8154, 44.2584],
				'长沙': [113.0823, 28.2568],
				'长治': [112.8625, 36.4746],
				'阳泉': [113.4778, 38.0951],
				'青岛': [120.4651, 36.3373],
				'韶关': [113.7964, 24.7028],
				'北京': [116.509448, 39.849036],
				'新疆': [87.651297, 43.846898],
				'哈密': [93.44, 42.78],
				'阿克苏': [80.19, 41.09],
				'阿勒泰': [88.12, 41.50],
				'阿图什': [76.08, 39.42],
				'博乐': [82.08, 44.57],
				'昌吉': [87.18, 44.02],
				'阜康': [87.58, 44.09],
				'和田': [79.55, 37.09],
				'克拉玛依': [84.51, 45.36],
				'喀什': [75.59, 39.30],
				'库尔勒': [86.07, 41.16],
				'奎屯': [84.56, 44.27],
				'石河子': [86.00, 44.18],
				'塔城': [46.46, 82.59],
				'吐鲁番': [89.11, 42.54],
				'伊宁': [81.20, 43.55]
			};

			let BJData = [
				[{
					name: '临沂'
				}, {
					name: '上海',
				}],
				[{
					name: '临沂'
				}, {
					name: '乌鲁木齐',
				}],
				[{
					name: '临沂'
				}, {
					name: '南宁',
				}],
				[{
					name: '临沂'
				}, {
					name: '济南',
				}],
				[{
					name: '临沂'
				}, {
					name: '西安',
				}],
				[{
					name: '临沂'
				}, {
					name: '深圳',
				}],
				[{
					name: '临沂'
				}, {
					name: '成都',
				}],
				[{
					name: '临沂'
				}, {
					name: '武汉',
				}],
				[{
					name: '临沂'
				}, {
					name: '哈尔滨',
				}],
				[{
					name: '临沂'
				}, {
					name: '福州',
				}],
				[{
					name: '临沂'
				}, {
					name: '包头',
				}],
				[{
					name: '临沂'
				}, {
					name: '昆明',
				}],
				[{
					name: '临沂'
				}, {
					name: '北京',
				}],
				[{
					name: '临沂'
				}, {
					name: '南昌',
				}],
				[{
					name: '临沂'
				}, {
					name: '大连',
				}],
			];

			setInterval(function() {
				getData();
			}, 1000); //定时器

			function getData() {
				drawPaint();
				$.ajax({
					/***********初始化获取全部设备坐标********/
					url: API_SERVER_URL + "network_list",
					type: 'POST',
					header: {
						"Access-Control-Allow-Origin": '*'
					},
					async: true,
					datatype: 'jsonp',
					success: function(data) {
						console.log("getData()...");
						console.log(data);
						BJData = [];
						// var provinces = data.bourn
						var provinces = [{
								"amount": 100,
								"outlets_name": "济南",
								"lon": "117.11835",
								"lat": "36.662807"
							}, {
								"amount": 100,
								"outlets_name": "天津",
								"lon": "117.221889",
								"lat": "39.139252"
							}, {
								"amount": 56132,
								"outlets_name": "北京",
								"lon": "116.711193",
								"lat": "39.98018"
							}, {
								"amount": 1000,
								"outlets_name": "日照",
								"lon": "119.474777",
								"lat": "35.434839"
							}, {
								"amount": 10000,
								"outlets_name": "长沙",
								"lon": "113.002827",
								"lat": "28.108838"
							}, {
								"amount": 1000,
								"outlets_name": "乌鲁木齐",
								"lon": "87.59898",
								"lat": "43.784451"
							}, {
								"amount": 100,
								"outlets_name": "南昌",
								"lon": "115.857929",
								"lat": "28.682958"
							}, {
								"amount": 100,
								"outlets_name": "郑州",
								"lon": "113.674535",
								"lat": "34.751779"
							}, {
								"amount": 1,
								"outlets_name": "成都",
								"lon": "104.081512",
								"lat": "30.583265"
							}, {
								"amount": 1,
								"outlets_name": "昆明",
								"lon": "102.841752",
								"lat": "24.892502"
							}, {
								"amount": 1,
								"outlets_name": "拉萨",
								"lon": "91.147341",
								"lat": "29.646616"
							},
							{
								"amount": 1,
								"outlets_name": "哈尔滨",
								"lon": "126.552948",
								"lat": "45.811691"
							}, {
								"amount": 1,
								"outlets_name": "杭州",
								"lon": "120.204955",
								"lat": "30.257824"
							}, {
								"amount": 1,
								"outlets_name": "佛山",
								"lon": "113.125823",
								"lat": "23.023315"
							}, {
								"amount": 1,
								"outlets_name": "和田",
							}, {
								"amount": 1,
								"outlets_name": "鄂尔多斯",
							}, {
								"amount": 1,
								"outlets_name": "武汉",
							}, {
								"amount": 1,
								"outlets_name": "西安",
							}, {
								"amount": 1,
								"outlets_name": "苏州",
							}, {
								"amount": 1,
								"outlets_name": "盐城",
							}, {
								"amount": 1,
								"outlets_name": "泉州",
							}, {
								"amount": 1,
								"outlets_name": "沈阳",
							}, {
								"amount": 1,
								"outlets_name": "南宁",
							},

						];
						var data = [];
						for (var i = 0; i < provinces.length; i++) {
							var serie = [];
							var item = {
								name: '临沂'
							}
							var item2 = {
								name: provinces[i].outlets_name,
								value: provinces[i].amount
							}
							serie.push(item2);
							serie.push(item);
							data.push(serie)
							BJData.push(serie);
						}
						// drawPaint();
					},
					error: function(e) {}
				})
			};

			var convertData = function(data) {
				var res = [];
				for (var i = 0; i < data.length; i++) {
					var dataItem = data[i];
					var fromCoord = geoCoordMap[dataItem[0].name];
					var toCoord = geoCoordMap[dataItem[1].name];
					if (fromCoord && toCoord) {
						res.push({
							fromName: dataItem[0].name,
							toName: dataItem[1].name,
							numValue: dataItem[1].value,
							coords: [fromCoord, toCoord]
						});
					}
				}
				return res;
			};

			function drawPaint() {
				var color = ['#ffa022'];
				var series = [];
				var LineColor = ['#ff0000', '#e8db0f', '#33e27d', '#33e27d']; //绿  黄  红
				[
					['临沂', BJData]
				].forEach(function(item, i) {
					series.push({
						name: item[0],
						type: 'effectScatter',
						coordinateSystem: 'geo',
						zlevel: 11,
						rippleEffect: {
							brushType: 'stroke'
						},
						itemStyle: {
							normal: {
								color: '#ffffff',

							}
						},
						label: {
							normal: {
								show: true,
								position: 'right',
								formatter: '{b}',
								textStyle: {
									fontSize: 12
								}
							}
						},
						data: item[1].map(function(dataItem) {
							return {
								name: dataItem[0].name,
								value: geoCoordMap[dataItem[0].name].concat([dataItem[1].value])
							};
						})
					}, {
						name: item[0],
						type: 'lines',
						zlevel: 1,
						show: true,
						position: 'right',
						formatter: '{b}',
						effect: {
							show: true,
							period: 6,
							trailLength: 1.7,
							color: '#fff',
							shadowBlur: 0,
							symbolSize: 0

						},
						lineStyle: {
							normal: {
								color: function(params) {
									let num = params.data.numValue; //这是数据中的参数，可改
									console.log(params.data.numValue)
									if (num > 20000) {
										return LineColor[0];
									} else if (num > 10000) {
										return LineColor[1];
									} else if (num > 5000) {
										return LineColor[2];
									} else {
										return LineColor[3];
									}
								},
								width: 1,
								curveness: 0.2
							}
						},
						data: convertData(item[1])
					}, {
						name: item[0],
						type: 'lines',
						zlevel: 2,
						symbol: ['none', 'arrow'],
						symbolSize: 10,
						effect: {
							show: true,
							period: 8,
							trailLength: 0,
							color: '#ffa022',
							// symbol: 'image://images/货车.png',
							// symbolSize: [15, 30]
							symbol: 'image://images/truck_1.png',
							symbolSize: [15, 30]
						},
						itemStyle: {
							color: color[i]
						},
						lineStyle: {
							normal: {
								color: function(params) {
									let num = params.data.numValue;
									if (num > 20000) {
										return LineColor[0];
									} else if (num > 10000) {
										return LineColor[1];
									} else if (num > 5000) {
										return LineColor[2];
									} else {
										return LineColor[3];
									}
								},
								opacity: 0.4,
								width: 0.2,
								curveness: 0.2
							}
						},
						data: convertData(item[1])
					}, {
						name: item[0],
						type: 'effectScatter',
						coordinateSystem: 'geo',
						zlevel: 2,
						rippleEffect: {
							brushType: 'stroke'
						},
						label: {
							show: true,
							position: 'right',
							formatter: '{b}',
						},
						itemStyle: {
							normal: {
								color: function(params) {
									let num = params.value[2];
									if (num > 20000) {
										return LineColor[0];
									} else if (num > 10000) {
										return LineColor[1];
									} else if (num > 5000) {
										return LineColor[2];
									} else {
										return LineColor[3];
									}
								}
							}
						},
						data: item[1].map(function(dataItem) {
							console.log(dataItem[1].name);
							if (geoCoordMap[dataItem[1].name]) {
								return {
									name: dataItem[1].name,
									value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
								};
							} else {
								return '';
							}
						})
					});
				});
				option = {
					title: {
						// text: '全国区域网点分布图',
						subtext: '',
						top: 40,
						left: 'center',
						textStyle: {
							fontSize: 24,
							color: '#ffffff'
						}
					},
					tooltip: {
						trigger: 'item', // 数据项图形触发方式，主要在散点图、饼图等无类目轴的图表中使用。
					},
					geo: {
						map: 'china',
						label: {
							// 显示省份
							show: false,
							fontSize: 12,
							color: '#ffffff'
						},
						roam: true, //鼠标平移或缩放
						itemStyle: {
							normal: {
								borderColor: 'rgba(147, 235, 248, 1)',
								borderWidth: 1,
								areaColor: {
									type: 'radial',
									x: 0.5,
									y: 0.6,
									r: 0.8,
									colorStops: [{
										offset: 0,
										color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
									}, {
										offset: 1,
										color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
									}],
									globalCoord: false, // 缺省为 false
								},
								shadowColor: 'rgba(128, 217, 248, 1)',
								shadowOffsetX: -2,
								shadowOffsetY: 2,
								shadowBlur: 10
							},
							emphasis: {
								// areaColor: '#389BB7',
								areaColor: '#0F3A74',
								borderWidth: 0,
							}
						}
					},
					series: series
				};
				if (option && typeof option === "object") {
					myChart.setOption(option, true);
				}
				/*窗口自适应，关键代码*/
				$(window).resize(function() {
					myChart.clear()
					myChart.resize();
					myChart.setOption(option, true);
				});
			}
		</script>

	</body>
</html>
